<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="最爱古风小雷丘">
    <title></title>
    <style>
        body {
            margin: 0;
            height: 2000px;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        header {
            width: 100%;
            height: 32px;
            line-height: 30px;
            border-bottom: 1px solid #EBEBEB;
        }

        .top {
            float: right;
        }

        .top li {
            float: left;
            margin-right: 20px;
            font-size: 14px;
        }

        .top>li>a {
            color: #333333;
        }

        .a {
            color: #666666;
            font-weight: bold;
        }

        .b {
            font-weight: bold;
        }

        .c {
            color: #EBEBEB;
        }

        .container {
            width: 1052px;
            margin: 0 auto;
            /* border: 1px solid rebeccapurple; */
        }

        .middle img {
            width: 138px;
            height: 45px;
        }

        #button {
            width: 105px;
            height: 41px;
            background-color: #3388FF;
            border: 1px solid #3388FF;
            font-size: 16px;
            color: white;
            vertical-align: middle;
        }

        #text {
            width: 535px;
            height: 37px;
            border: 1px solid #B8B8B8;
            vertical-align: middle;
        }

        .middle {
            float: right;
            height: 50px;
            line-height: 50px;
            margin-top: 25px;
            /* margin-bottom: 10px; */
        }

        .middle li {
            float: left;
            margin-left: 16px;
            font-size: 14px;
        }

        .middle a {
            color: #333333;
        }

        .clear {
            clear: both;
        }

        .radio {
            font-size: 12px;
            color: #666666;
            margin-left: 243px;
        }
        /* .down{
            font-size: 0;
            position: relative;
            border-top: 5px solid red;
            border-left:  5px solid transparent;
            border-right:  5px solid transparent;
            border-bottom:  5px solid transparent;
        } */
        .third{
            position: relative;
            display: flex;
        }
        .third li{
            /* float: left; */
             height: 40px;
             padding-left: 10px;
              padding-right: 10px;
             text-align: center;
          
             font-size: 14px;
             z-index: 100;
        }
        .third img{
             vertical-align: -4px;; 
        }
        .third li:nth-child(1){
            margin-left: 0;
            background-color: #CC0000;
            width: 60px;
        }
        .content{
            width: 100%;
            height: 41px;
            line-height: 40px;
            background-color: #01204F;
            color: white;
             margin-top: 10px; 
        }
        .move{
            width: 60px;
            height: 40px;
            background-color: #CC0000;
            position: absolute;
            left: 0;
            top: 0;
            transition: all 0.3s linear; 
        }
        .back-to-top{
            width: 100px;
            height: 50px;
            background-color: lightblue;
            text-align: center;
            line-height: 50px;
            position: fixed;
            right:20px;
             bottom:30px; 
        }
    </style>
</head>

<body>
    <header>
        <ul class="top">
            <li class="b"><a href="#">网页</a></li>
            <li class="a">新闻</li>
            <li class="b"><a href="#">贴吧</a></li>
            <li class="b"><a href="#">知道</a></li>
            <li class="b"><a href="#">音乐</a></li>
            <li class="b"><a href="#">图片</a></li>
            <li class="b"><a href="#">视频</a></li>
            <li class="b"><a href="#">地图</a></li>
            <li class="b"><a href="#">文库</a></li>
            <li class="c">|</li>
            <li><a href="#">百度首页</a></li>
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">百度新闻客户端</a></li>
        </ul>
    </header>

    <div class="container">
        <ul class="middle">
            <li><img src="logo.png" alt=""></li>
            <li>
                <input type="text" id="text"><input type="button" value="百度一下" id="button">
            </li>
            <li><a href="#">帮助</a></li>
            <li><a href="#">高级搜索</a></li>
            <li><a href="#">设置</a></li>
        </ul>
        <div class="clear"></div>
        <div class="radio">
            <input type="radio" id="article" name="xx">
            <label for="article">新闻全文</label>
            <input type="radio" id="title" name="xx">
            <label for="title">新闻标题</label>
        </div>
    </div>
    <main>
        <div class="content">
            <div class="container">
            <ul class="third">
                <li class="li"> <img src="01.png" alt="">首页</li>
                <li class="li">百家号</li>
                <li class="li">国内</li>
                <li class="li">国际</li>
                <li class="li">军事</li>
                <li class="li">社会</li>
                <li class="li">财经</li>
                <li class="li">娱乐</li>
                <li class="li">体育</li>
                <li class="li">互联网</li>
                <li class="li">科技</li>
                <li class="li">游戏</li>
                <li class="li">时尚</li>
                <li class="li">女人</li>
                <li class="li">汽车</li>
                <li class="li">个性推荐</li>
                <li class="li">更多</li>
                <div class="move"></div>
            </ul>
        </div>
        </div>
    </main>

     <div class="back-to-top">返回顶部</div>
</body>

</html>
<script>
    
    var content  = document.querySelector('main').querySelector('.content');   
    var body = document.querySelector('body');
    var uls = document.querySelectorAll('.li');
    var move = document.querySelector('.move');
    var top = document.querySelector('.back-to-top');

    // console.log(content.scrollTop);
    // alert(body.scrollTop);

    // 元素距离页面左上角的偏移量
    // console.log(content.offsetTop);
     window.onscroll = function(){
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log(scrollTop);
        if(scrollTop > 138){
             content.style.position = 'fixed';
             content.style.top = '0';
             content.style.marginTop = '0';
        }else{
            content.style.cssText = '';
        }
    }

    for(var i = 0;i < uls.length;i++){
         uls[i].index = i;
         uls[i].onmouseenter = function(){
         var left = uls[this.index].offsetLeft;  
         move.style.left = left + 'px'; 
         var width = uls[this.index].offsetWidth;
         move.style.width = width + 'px';
        }
         uls[i].onmouseleave = function(){    
         move.style.left = 0; 
         move.style.width = 0;
        }
    }
//    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    top.onclick = function(){
          document.body.scrollTop = document.documentElement.scrollTop = 0;
     }

    
   
</script>